<template>
  <view class="product" @click="handleToDetail">
    <view class="pic">
      <image class="image" :src="productData.firstImgUrl" mode="aspectFill" />
      <image v-if="productData.productIconUrl" class="image_icon" :src="productData.productIconUrl" mode="widthFix" />
    </view>
    <view class="tags" v-if="productData.productType === 1 && productData.joinAct === 1">
      <view class="tag-item tag-point">可参与积分</view>
      <view class="tag-item tag-cashback" >可参与返现</view>
    </view>
    <view class="desc">
      <view class="tit">{{productData.productName}} </view>
      <view class="price">
        <text v-if="!isPointProduct" class="price_currency" >￥</text>
        <text >{{ showPrice }}</text>
        <text v-if="isPointProduct" class="point-hint" >积分</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, defineProps, computed } from 'vue'
import {useStore} from "vuex";
const store = useStore();
const isVip = computed(()=> {
  return store.state.user.isVip
})
const props = defineProps({
  product: {
    type: Object,
    default: () => {}
  }
})
const productData = computed(()=> {
  return props.product || {}
})
const isPointProduct = computed(()=> {
  return productData.value.productType === 2
})
const showPrice = computed(()=> {
  const { price } = productData.value
  if(isVip.value) {
    return price
  }
  return price.toString()[0] + '****'
})
function handleToDetail() {
  uni.navigateTo({
	url: `/pages/product/detail?pid=${productData.value.id}`
});
}
</script>

<style lang="scss" scoped>
.product{
  position: relative;
  .pic{
    width: 331rpx;
    height: 331rpx;
    // overflow: hidden;
    position: relative;
    .image{
      width: 100%;
      height: 100%;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
    }
    .image_icon{
      position: absolute;
      top: -3rpx;
      left: -3rpx;
      width: 100rpx;
    }
  }
  .tags{
    position: absolute;
    top: 4rpx;
    right: -4rpx;
    display: flex;
    flex-direction: column;
    gap: 10rpx;
    .tag-item{
      width: 106rpx;
      height: 32rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4rpx 8rpx 0rpx 4rpx;
      font-weight: 400;
      font-size: 18rpx;
      color: #FFFFFF;
      position: relative;
      &:after{
        position: absolute;
        top: 100%;
        right: 0;
        content: '';
        width: 0;
        height: 0;
      }
    }
    .tag-point{
      background: linear-gradient( 270deg, #FF8F1F 0%, #FFC892 99%);
      &:after{
        border-left: 8rpx solid #834F1B;
        border-bottom: 6rpx solid transparent;
      }
    }
    .tag-cashback{
      background: linear-gradient( 270deg, #3662EC 0%, #7C9CFF 100%);
      &:after{
        border-left: 8rpx solid #1335A2;
        border-bottom: 6rpx solid transparent;
      }
    }
  }
  .desc{
    padding-top: 24rpx;
    .tit{
      font-weight: 400;
      font-size: 26rpx;
      color: #333333;
      line-height: 36rpx;
      margin-bottom: 16rpx;
    }
    .price{
      font-weight: 400;
      font-size: 32rpx;
      color: #FA5151;
      line-height: 36rpx;
      .price_currency{
        font-size: 24rpx;
      }
      .point-hint{
        font-size: 24rpx;
        margin-left: 2rpx;
      }
    }
  }
}
</style>
